<template>
    <div class="login">
        <MyHead title="修改密码" ></MyHead>
        <div  class="myform">
            <van-form 
                validate-first
                ref="form"
                @submit="onSubmit"
                @failed="onfail"
                >
                <PassInput
                    v-model="form.oldpass"
                    name="oldpass"
                    label="旧密码"
                    placeholder="旧密码"
                    :rules='[{ required: true, message: "请填写旧密码" },{ pattern:reg.pwd,message:"请输入6-16的数字字母组合的密码"}]'
                />
                <PassInput
                    v-model="form.newpass"
                    name="newpass"
                    label="新密码"
                    placeholder="新密码"
                    @blur="checktwopass"
                    :rules='[{ required: true, message: "请填写新密码" },{ pattern:reg.pwd,message:"请输入6-16的数字字母组合的密码"}]'
                />
                <PassInput
                    v-model="form.dbnewpass"
                    name="dbnewpass"
                    label="确认新密码"
                    placeholder="确认新密码"
                    :rules='[{ required: true, message: "请填写新密码" },{ pattern:reg.pwd,message:"请输入6-16的数字字母组合的密码"},{validator:checkCommonPass,message:"两次密码不一致"}]'
                />
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">确认修改</van-button>
                </div>
                <div style="margin: 16px;">
                    <van-button round block type="danger" native-type="button" @click="resetData">重置</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form:{}
        }
    },
    methods:{
       async onSubmit(value){
        let res = await this.$ajax.findUser({phone:localStorage.getItem('lgphone')})
          if(res[0].password==value.oldpass){
            let res1 = await this.$ajax.findPass(res[0].id,{
                password:value.newpass,
                dbpass:value.newpass
            })
            this.ShowSuccess("密码重置成功")
            this.changeUserInfo(null)   
            this.$router.push({name:'login'})
          }else{
            this.ShowFail("旧密码错误")
          }
        },
        onfail(){
          this.ShowFail("校验失败")
        },
        resetData(){
            this.form = {}
        },
        checkCommonPass(value){
            if(this.reg.pwd.test(value)&& this.reg.pwd.test(this.form.newpass)){
                return this.form.newpass == value;
            }
        },
        checktwopass(){
            if( this.reg.pwd.test(this.form.dbnewpass) && this.reg.pwd.test (this.form.newpass) ) {
                this.$refs.form.validate('dbnewpass')
            }
        }
    }
}
</script>


<style lang="scss">
.login{
    .myform{
        padding:15px;
        .linkitems{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: 12px;
            margin-top:20px;
            .cm{
                display: block;
                text-align: center;
                max-width: 120px;
                height: 20px;
                line-height: 20px;
                background: skyblue;
                border-radius: 10px;
                color:pink;
                padding: 0px 5px;
            }
            .co{
                display: block;
                text-align: center;
                width: 60px;
                height: 20px;
                line-height: 20px;
                background: pink;
                border-radius: 10px;
                color:skyblue;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
    .van-button--round::v-deep {
      background: #ff9db5;;
      border-radius: 4px;
      border: 1px solid #fb7299;
    }
</style>